<template>
  <div>
    <el-form ref="listData" :model="listData" label-width="80px" class="demo-ruleForm">
      <!--<el-form :model="form" label-width="80px" ref="form">-->
      <!--==========================================================================================-->
      <el-row style="margin-bottom: 20px;font-size: 20px">
        <el-col :span="1" style="color: darkgoldenrod;">1/7</el-col>
        <el-col :span="4">基本信息</el-col>
      </el-row>
      <!--==========================================================================================-->
      <el-row>
        <el-col :span="16">
          <div class="box">
            <div class="box_content">
              <el-form-item label="姓名">
                <el-input v-model="listData.name" :value="form.name" />
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="性别" prop="sex">
                <el-input v-model="listData.sex" />
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="民族" prop="nation">
                <el-input v-model="listData.phone" />
              </el-form-item>
            </div>
          </div>
          <div class="box">
            <div class="box_content">
              <el-form-item label="国籍" prop="nationality">
                <el-input v-model="listData.nationality" />
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="出生年月" prop="birthday">
                <el-date-picker v-model="listData.birthday" type="date" style="width: 100%;" />
              </el-form-item>
            </div>
          </div>
          <!--==========================================================================================-->
          <div class="box">
            <div class="box_content">
              <el-form-item label="联系电话" prop="phone">
                <el-input v-model="listData.phone">
                  <template slot="prepend">+86</template>
                </el-input>
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="证件号码" prop="number">
                <el-input v-model="form.number" class="input-with-select">
                  <el-select slot="prepend" v-model="value" style="width: 90px">
                    <el-option label="身份证" value="1" />
                    <el-option label="通行证" value="2" />
                  </el-select>
                </el-input>
              </el-form-item>
            </div>
          </div>
          <div class="box">
            <el-form-item label="">
              <el-switch
                v-model="value1"
                active-text="此手机号是否关智助教育APP学生版"
              />
            </el-form-item>
          </div>
          <el-row style="margin-bottom: 20px;font-size: 20px">
            <el-col :span="1" style="color: darkgoldenrod;">2/7</el-col>
            <el-col :span="4">家庭信息</el-col>
          </el-row>
          <!--==========================================================================================-->
          <div class="box">
            <div class="box_content">
              <el-form-item label="家长姓名">
                <el-input v-model="form.FatherName" />
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="家长称谓">
                <el-input v-model="form.DaD" />
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="联系电话">
                <el-input v-model="form.FatherPhone">
                  <template slot="prepend">+86</template>
                </el-input>
              </el-form-item>
            </div>
          </div>
          <div class="box">
            <el-form-item label="">
              <el-switch
                v-model="value1"
                active-text="此手机号是否关智助教育APP学生版"
              />
            </el-form-item>
          </div>
          <!--==========================================================================================-->
          <div class="box">
            <div class="box_content">
              <el-form-item label="家长姓名">
                <el-input v-model="form.MotherName" />
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="家长称谓">
                <el-input v-model="form.MoM" />
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="联系电话">
                <el-input v-model="form.MotherPhone">
                  <template slot="prepend">+86</template>
                </el-input>
              </el-form-item>
            </div>
          </div>
          <div class="box">
            <el-form-item label="">
              <el-switch
                v-model="value1"
                active-text="此手机号是否关智助教育APP学生版"
              />
            </el-form-item>
          </div>
          <div class="box">
            <div class="box_content">
              <div style="text-align: center">
                <el-button type="info">添加联系人</el-button>
              </div>
            </div>
          </div>
          <!--==========================================================================================-->
          <el-row style="margin-bottom: 20px;font-size: 20px">
            <el-col :span="1" style="color: darkgoldenrod;">3/7</el-col>
            <el-col :span="4">在校信息</el-col>
          </el-row>
          <!--==========================================================================================-->
          <div class="box">
            <div class="box_content">
              <el-form-item label="在读学期">
                <el-select v-model="SelectSemester" class="select">
                  <el-option v-for="item in semester" :key="item.value" :label="item.label" :value="item.label" />
                </el-select>
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="在校年级">
                <el-select v-model="SelectGrade" class="select">
                  <el-option v-for="item in grade" :key="item.value" :label="item.label" :value="item.label" />
                </el-select>
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="在读课程">
                <el-select v-model="SelectCourse" class="select">
                  <el-option v-for="item in course" :key="item.value" :label="item.label" :value="item.label" />
                </el-select>
              </el-form-item>
            </div>
          </div>
          <!--==========================================================================================-->
          <div class="box">
            <div class="box_content">
              <el-form-item label="所属校区">
                <el-select v-model="SelectSchool" class="select">
                  <el-option v-for="item in school" :key="item.value" :label="item.label" :value="item.label" />
                </el-select>
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="招生来源">
                <el-select v-model="listData.address" class="select">
                  <el-option v-for="item in channel" :key="item.value" :label="item.label" :value="item.label" />
                </el-select>
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="推荐人">
                <el-input v-model="form.recommend" />
              </el-form-item>
            </div>
          </div>
          <div class="box">
            <div class="box_content">
              <el-form-item label="班主任">
                <el-input v-model="listData.teacher" />
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="授课老师">
                <el-select v-model="listData.teacher2" class="select">
                  <el-option v-for="item in teacher2" :key="item.value" :label="item.label" :value="item.label" />
                </el-select>
              </el-form-item>
            </div>
            <div class="box_content" />
            <div class="box_content" />
            <div class="box">
              <div class="box_content">
                <el-form-item label="主跟进人">
                  <el-input v-model="listData.teacher" />
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="副跟进人">
                  <el-select v-model="listData.teacher2" class="select">
                    <el-option v-for="item in teacher2" :key="item.value" :label="item.label" :value="item.label" />
                  </el-select>
                </el-form-item>
              </div>
              <div class="box_content" />
              <div class="box_content" />
            </div>
          </div>
        </el-col>
        <el-col :span="7" style="margin-left: 20px">
          <div class="box">
            <div class="box_content4">
              2020-08-05-15:29
            </div>
            <div class="box_content4">
              电话跟进
            </div>
            <div class="box_content4">
              跟进人：李丽君
            </div>
          </div>
          <div class="box">
            <div class="box_content4" style="">
              沟通内容：请输入1000字以内
            </div>
          </div>
          <div class="box">
            <div class="box_content4">
              下次沟通时间：2020-08-05-15:29
            </div>
          </div>
          <hr>
          <div class="box">
            <div class="box_content4">
              2020-08-05-15:29
            </div>
            <div class="box_content4">
              电话跟进
            </div>
            <div class="box_content4">
              跟进人：李丽君
            </div>
          </div>
          <div class="box">
            <div class="box_content4">
              沟通内容：请输入1000字以内
            </div>
          </div>
          <div class="box">
            <div class="box_content4">
              下次沟通时间：2020-08-05-15:29
            </div>
          </div>
          <div>增加跟进记录：</div>
          <el-form ref="Talk" :model="Talk" :rules="rules" label-width="80px">
            <div class="box">
              <div class="box_content">
                <el-form-item label="沟通时间" prop="Time">
                  <el-date-picker v-model="Talk.Time" type="date" placeholder="请选择时间" style="width: 100%" />
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="沟通方式" prop="Talk">
                  <el-select v-model="Talk.Talk" class="select" placeholder="请选择沟通方式" style="width: 100%">
                    <el-option label="网上" value="1" />
                    <el-option label="柜台" value="2" />
                  </el-select>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="沟通内容">
                  <el-input v-model="Talk.Talktextarea" type="textarea" maxlength="1000" show-word-limit />
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="">
                  <div class="block">
                    意向度<el-rate />
                  </div>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="">
                  <el-checkbox v-model="checked">下次沟通时间</el-checkbox>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item prop="Time2">
                  <el-date-picker v-model="Talk.Time2" type="date" placeholder="请选择时间" style="width: 100%" />
                </el-form-item>
              </div>
            </div>
            <div class="box" style="text-align: center">
              <div class="box_content">
                <el-form-item prop="Time2">
                  <el-button type="primary" @click="resetForm('Talk')">重 置</el-button>
                  <el-button type="primary" @click="submitForm('Talk')">确 定</el-button>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </el-col>
      </el-row>
      <div class="box">
        <div class="box_content">
          <div class="block" style="text-align: center">
            <span>意向度</span><el-rate />
          </div>
        </div>
      </div>
      <el-row style="margin-bottom: 20px;font-size: 20px">
        <el-col :span="1" style="color: darkgoldenrod;">4/7</el-col>
        <el-col :span="4">订单信息</el-col>
      </el-row>
      <div class="box">
        <div class="box_content3">
          订单编号：ZZEDU1234567890
        </div>
        <div class="box_content3">
          交易编号：真实收据/银联交易单号/微信交易号/支付宝交易号
        </div>
        <div class="box_content3">
          交易时间：2020-10-03 10:10:10
        </div>
      </div>
      <div class="box">
        <div class="box_content3">
          购买内容：：2020年冬季 国际朗文课程
        </div>
        <div class="box_content3">
          开课时间：2020-10-10 上课时间：一、二、三、四、 五、六
        </div>
        <div class="box_content3">
          支付类型：订金 支付金额：1000
        </div>
      </div>
      <hr>
      <div class="box">
        <div class="box_content3">
          订单编号：ZZEDU0987654321
        </div>
        <div class="box_content3">
          交易编号：真实收据/银联交易单号/微信交易号/支付宝交易号
        </div>
        <div class="box_content3">
          交易时间：2020-10-13 10:10:10
        </div>
      </div>
      <div class="box">
        <div class="box_content3">
          购买内容：2020年冬季 国际朗文课程
        </div>
        <div class="box_content3">
          开课时间：2020-10-10 上课时间：一、二、三、四、 五、六
        </div>
        <div class="box_content3">
          支付类型：学费 支付金额：1000
        </div>
      </div>
      <div class="box">
        <div class="box_content3">
          <div style="margin-left: 75px">2020年冬季 国际朗文课程 教材</div>
        </div>
        <div class="box_content3">
          购买数量：1 套
        </div>
        <div class="box_content3">
          支付类型：学费 支付金额：100
        </div>
      </div>
      <!--==========================================================================================-->
      <el-row style="margin-bottom: 20px;font-size: 20px">
        <el-col :span="1" style="color: darkgoldenrod;">5/7</el-col>
        <el-col :span="4">学业信息</el-col>
      </el-row>
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content2">
          <el-form-item label="曾读学校">
            <el-select v-model="listData.school" class="select">
              <el-option v-for="item in school" :key="item.value" :label="item.label" :value="item.label" />
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="语文">
            <el-input v-model="form.Chinese" />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="数学">
            <el-input v-model="form.Math" />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="英语">
            <el-input v-model="form.English" />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="物理">
            <el-input v-model="form.Physics" />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="化学">
            <el-input v-model="form.Chemistry" />
          </el-form-item>
        </div>
      </div>
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content2">
          <el-form-item label="曾读年级">
            <el-select v-model="SelectGradeing" class="select">
              <el-option v-for="item in grade" :key="item.value" :label="item.label" :value="item.label" />
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="历史">
            <el-input v-model="form.History" />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="地理">
            <el-input v-model="form.Geography" />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="政治">
            <el-input v-model="form.Politics" />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="生物">
            <el-input v-model="form.Biology" />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="信息科技">
            <el-input v-model="form.Technology" />
          </el-form-item>
        </div>
      </div>
      <!--==========================================================================================-->
      <el-row style="margin-bottom: 20px;font-size: 20px">
        <el-col :span="1" style="color: darkgoldenrod;">6/7</el-col>
        <el-col :span="4">学业信息</el-col>
      </el-row>
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content2">
          <el-form-item label="考试日期">
            <el-select v-model="listData.school" class="select">
              <el-option v-for="item in school" :key="item.value" :label="item.label" :value="item.label" />
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="语文">
            <el-input v-model="form.Chinese" />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="数学">
            <el-input v-model="form.Math" />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="英语">
            <el-input v-model="form.English" />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="物理">
            <el-input v-model="form.Physics" />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="化学">
            <el-input v-model="form.Chemistry" />
          </el-form-item>
        </div>
      </div>
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content2">
          <el-form-item label="考试类型">
            <el-select v-model="SelectGradeing" class="select">
              <el-option v-for="item in grade" :key="item.value" :label="item.label" :value="item.label" />
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="历史">
            <el-input v-model="form.History" />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="地理">
            <el-input v-model="form.Geography" />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="政治">
            <el-input v-model="form.Politics" />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="生物">
            <el-input v-model="form.Biology" />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="信息科技">
            <el-input v-model="form.Technology" />
          </el-form-item>
        </div>
      </div>
      <!--==========================================================================================-->
      <el-row style="margin-bottom: 20px;font-size: 20px">
        <el-col :span="1" style="color: darkgoldenrod;">7/7</el-col>
        <el-col :span="4">在校成绩</el-col>
      </el-row>
      <!--==========================================================================================-->
      <el-row>
        <el-col :span="4">
          <el-form-item label="户籍地址" prop="province">
            <el-cascader
              ref="cascaderCity"
              v-model="form.province"
              :value="cityArr"
              style="width: 300px"
              :placeholder="placeholder"
              :options="options"
              :props="{
                value: 'name',
                label: 'name',
                ...props
              }"
              @change="handleChange"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!--==========================================================================================-->
      <el-row>
        <el-col :span="24">
          <el-form-item label="地址" prop="DetailedAddress">
            <el-input v-model="form.DetailedAddress" />
          </el-form-item>
        </el-col>
      </el-row>
      <!--==========================================================================================-->
      <el-row>
        <el-form-item label="备注">
          <el-input v-model="form.textarea" type="textarea" maxlength="1000" show-word-limit />
        </el-form-item>
      </el-row>
      <!--==========================================================================================-->
      <!--==========================================================================================-->
    </el-form>
    <!--==========================================================================================-->
  </div>
</template>

<script>
import addressData from '@/components/CascaderCity/addressData.json'
export default {
    name: 'Follow2',
    /* 城市级联*/
    props: {
        listData: {
            type: Array,
            default: () => []
        },
        /**
       * 默认区域传入格式:
       * 非多选(props.multiple = false): 北京市/北京市/东城区
       * 多选(props.multiple = true): 北京市/北京市/东城区,广东省/广州市/天河区
       */
        value: {
            type: String,
            default: ''
        },
        /**
       * 默认是regionData
       * regionData(省市区) provinceAndCityData(省市)
       */
        optionType: {
            type: String,
            default: 'regionData',
            validator: function(value) {
                return ['regionData', 'provinceAndCityData'].indexOf(value) !== -1 // 这个值必须匹配下列字符串中的一个
            }
        },
        /**
       * 是否需要开启全国
       */
        isAddAll: {
            type: Boolean,
            default: false
        },
        placeholder: {
            type: String,
            default: ''
        },
        props: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            value1: true,
            /* 弹出框属性*/
            NewStudentFile: false,
            /* 城市级联*/
            cityArr: [],
            options: [],
            isChange: false,
            form: {
                name: '', /* 姓名*/
                sex: '', /* 性别*/
                nation: '', /* 民族*/
                nationality: '', /* 国籍*/
                birthday: '', /* 出生年月日*/
                phone: '', /* 联系电话*/
                number: '', /* 身份证号码*/
                recommend: '', /* 推荐人*/
                teacher: '', /* 主跟进人*/
                DaD: '爸爸', /* 父亲称谓*/
                MoM: '妈妈', /* 母亲称谓*/
                FatherName: '', /* 父亲名字*/
                MotherName: '', /* 母亲名字*/
                FatherPhone: '', /* 爸爸电话*/
                MotherPhone: '', /* 妈妈电话*/
                Chinese: '', /* 语文*/
                Math: '', /* 数学*/
                English: '', /* 英语*/
                Physics: '', /* 物理*/
                Chemistry: '', /* 化学*/
                History: '', /* 历史*/
                Geography: '', /* 地理*/
                Politics: '', /* 政治*/
                Biology: '', /* 生物*/
                Technology: '', /* 信息科技*/
                DetailedAddress: '', /* 详细地址*/
                textarea: '', /* 备注*/
                SelectTeacher: '',
                province: []
            },
            SelectSemester: '',
            SelectGrade: '',
            SelectCourse: '',
            SelectSchool: '',
            SelectTeacher: '',
            SelectChannel: '',
            SelectTeacher2: '',
            SelectSchooling: '',
            SelectGradeing: '',
            province: [],
            city: '',
            area: '',
            /* 学期*/
            semester: [{
                value: '选项1',
                label: '第一学期'
            }, {
                value: '选项2',
                label: '第二学期'
            }],
            /* 曾读学校*/
            school: [{
                value: '选项1',
                label: '一小'
            }, {
                value: '选项2',
                label: '二小'
            }],
            /* 招生来源*/
            channel: [{
                value: '选项1',
                label: '网上'
            }, {
                value: '选项2',
                label: '专台'
            }],
            /* 年级*/
            grade: [{
                value: '选项1',
                label: '一年级'
            }, {
                value: '选项2',
                label: '二年级'
            }],
            /* 课程*/
            course: [{
                value: '选项1',
                label: '语文'
            }, {
                value: '选项2',
                label: '英语'
            }, {
                value: '选项2',
                label: '数学'
            }],
            /* 副跟进人*/
            teacher2: [{
                value: '选项1',
                label: '陈老师'
            }, {
                value: '选项2',
                label: '李老师'
            }],
            /* 表单验证*/
            rules: {
                Talk: [
                    { required: true, message: '不能为空', trigger: 'blur,change' }
                ],
                Time: [
                    { required: true, message: '不能为空', trigger: 'blur,change' }
                ],
                Time2: [
                    { required: true, message: '不能为空', trigger: 'blur,change' }
                ]
            },
            Talk: [{
                /* 单选框*/
                Talk: '',
                Time: '',
                Time2: '',
                Talktextarea: ''
            }]
        }
    },
    /* 城市级联*/
    watch: {
        value(val) {
            if (this.isChange) {
                this.isChange = false
            } else {
                this.setDefaultCity()
                const panel = this.$refs.cascaderCity.$refs.panel
                panel.clearCheckedNodes() // 清空级联选择器选中状态
                panel.activePath = [] // 清除高亮
            }
        }
    },
    /* 城市级联*/
    created() {
        this.setDefaultCity()
        this.init()
    },
    /* 城市级联*/
    methods: {
        /* 提交*/
        submitForm(formName) {
        /* this.NewStudentFile = false*/
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!')
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        /* 重置*/
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
        /**
       * 初始化数据已选的数据
       */
        setDefaultCity() {
        // 判断是否有默认区域再判断是否开启多选
            const value = JSON.parse(JSON.stringify(this.value))
            let data = []
            if (value !== '' && typeof value === 'string') {
                if (this.props.multiple) {
                    data = value.split(',').map(item => {
                        return this.handleDefaultRegion(item)
                    })
                } else {
                    data = this.handleDefaultRegion(value)
                }
            }
            this.cityArr = data
        },
        /**
       * 字符串拆分出数组
       */
        handleDefaultRegion(value) {
            return value.split('/')
        },
        /**
       * 将数组拼接回字符串
       */
        handleRegionStr(value) {
            let str = ''
            value.forEach(item => {
                str += item + '/'
            })
            return str.slice(0, str.length - 1)
        },
        /**
       * 初始化省市区数据
       */
        init() {
            const cityData = JSON.parse(JSON.stringify(addressData)) // 避免JSON源被改变
            if (this.isAddAll) {
                cityData.unshift({ id: 0, name: '全国' }) // 插入全国选项
            }
            switch (this.optionType) {
                case 'regionData': // 省市区
                    this.options = cityData
                    break
                case 'provinceAndCityData': // 省市
                    this.options = cityData.map(item => {
                        if (item.children) {
                            item.children.map(item1 => {
                                item1.children = null // 删除一个最后个区
                                return item1
                            })
                        }
                        return item
                    })
                    break
                default:
                    console.error('请选择正确的optionType！')
                    break
            }
        },
        handleChange(event) {
            this.$emit('change', event)
            this.cityArr = event
            let str = ''
            if (this.props.multiple) { // 多选
                event.forEach(item => {
                    str += this.handleRegionStr(item) + ','
                })
                str = str.slice(0, str.length - 1)
            } else {
                str = this.handleRegionStr(event)
            }
            this.isChange = true
            this.$emit('input', str)
            console.log('选中:', event)
        }
    }
}
</script>

<style scoped>
  .selectFont{
    font-size: 15px;
  }
  .box{
    width: 100%;
    display: flex;
    flex-direction: row;
    /*//两侧对齐*/
    justify-content:space-between;
    /*//自动换行*/
    flex-wrap: wrap;
    /*//清除上下行的中间空隙*/
    align-content: flex-start;
  }
  .box_content{
    flex: 30 0 250px;
  }
  .box_content2{
    flex: 30 0 200px;
  }
  .box_content3{
    flex: 30 0 400px;
    margin-bottom: 10px;
    font-size: 15px;
    text-align: center;
  }
  .box_content4{
    flex: 30 0 120px;
    margin-bottom: 10px;
    font-size: 15px;
  }
  /*//解决最后一行的问题*/
  .box:after{
    content: '';
    width: 30%;
  }
</style>
